<extend name="Layout/index"/>
<block name="link">
	<style>
		.add-goods-step {
			    font-size: 0;
			    background-color: #FFF;
			    *word-spacing: -1px;
			    margin: 0 0 20px 20px;
			    overflow: hidden;
		}
	
		.add-goods-step li {
		    color: #CCC;
		    vertical-align: top;
		    letter-spacing: normal;
		    word-spacing: normal;
		    display: inline-block;
		    width: 100%;
		    height: 50px;
		    position: relative;
		    z-index: 1;
		    float: left;
		}
		.add-goods-step li{
			width:262px;
			float:left;
		}
		.add-goods-step li.current, .style-seller .add-goods-step li.current h2 {
   			 color: #1ABC9C !important;
		}
		.goods-spec .simple-form-field.spec-title-box {
		    padding-top: 0;
		    padding-bottom: 5px;
		    background: #22BAA0;
		    border: 1px solid #22BAA0;
		    border-bottom: 0px;
		    color: #fff;
		    border-bottom: 0px;
		    font-weight: 700;
		}
		body, td, input, textarea, select, button {
    color: #666;
    font-size: 12px;
    font-family: "Microsoft Yahei", "Lucida Grande", Verdana, Lucida, Helvetica, Arial, sans-serif;
}

.table *{
    font-size: 12px;
}
.table th{
	width:34px;
}
table thead{
	color: #ffffff;
	background: #48CFAE;
	padding: 10px 5px;
	cursor: default;
}
table tr td{
	text-align:center;
}

table tbody{
	background:white;
}
.btn-file {  /*  上传按钮*/
    position: relative;
    overflow: hidden;
}

.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity = 0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}
	</style>

</block>	
<block name="breadcrumb-01">
	<li>
		<i class="icon-home home-icon"></i>
		<a href="#">首页</a>
	</li>
	<li class="active">添加sku</li>
</block>

<block name="breadcrumb-02">
 <h3>添加sku产品</h3>
</block>


<block name="main">
	<div class="col-md-7 col-md-push-2" style="margin-bottom:80px">
		<form class="form-horizontal" role="form" action="<{:U('Goods/doaddsku')}>" method="post" enctype="multipart/form-data">
		<div class="form-group" style="height:30px">
		    <label for="inputEmail3" class="col-sm-2 control-label">商品分类</label>
		    <div class="col-sm-10" style="padding-top:5px" data-cid="<{$product['cid']}>" id="catlistbox">
		         <volist name="cat" id="catlist">
		         	<span class="control-label"><{$catlist['html']}><{$catlist['name']}></span>
		         </volist>	
		    </div>
		  </div>
		  <div class="form-group">
		  	<!-- <div class="col-sm-1">
		  		 <label for="inputPassword3" class="col-md-12 control-label"></span>商品名称</label>
		  	</div> -->
		   <label for="inputEmail3" class="col-sm-2 control-label">商品名</label>
		    <div class="col-sm-10" style="width:400px">
		      <span class="" style="font-size:16px"><{$product['gname']}></span>
		    </div>
		  </div>
		   <div class="form-group">
		    <label for="inputPassword1" class="col-sm-2 control-label">商品品牌</label>
		    <div class="col-sm-10" style="font-size:16px">
		     	<{$brand['brandname']}> 
		    </div>	
		  </div>

		  <!--属性大盒子-->
		  <div style="padding: 10px;background: rgba(93,178,255,.1);border: 1px solid #BCE8F1;min-width: 650px;">
		  		 <div class="form-group" style=" padding-top: 0;padding-bottom: 5px;background: #22BAA0;border: 1px solid #22BAA0;border-bottom: 0px;color: #fff;border-bottom: 0px;font-weight: 700;">
		      			<label for="inputPassword1" class="col-sm-2 control-label">属性选择</label>	
		      			<label for="inputPassword1" class="col-sm-2 control-label"><button class="btn btn-primary btn-xs addSku">填写具体信息</button></label>	  
		 		 </div>
			<img id="loading" src="__PUBLIC__/Home/img/loading3.gif" alt="" style="position:fixed;left:50%;top:60%;display:none">

			<div id="propertyChBox"><!--ajax变换部分-->
			  <!--属性1-->
			  
		 	</div><!--ajax变换部分-->

			<div id="skuTable"><!--sku表格变换部分-->
				
			</div>
		 			<!--商品主图上传-->
		  </div>
		  <div class="form-group" style="margin-top:20px">
		   	
		    </div>
			  <input type="hidden" name="goodsname" value="<{$product['gname']}>"/>
		 	  <input type="hidden" name="spuid" value="<{$Think.get.spuid}>">
			  <button class="btn btn-info">添加产品</button>
		</form>
	</div>
	


<!--隐藏的元素用于接受-->
<div class="col-md-12 cloned" style="display:none">
	<table id="sku_table" class="sku_table" style="display:_none">
							<thead>
								<tr>
									<th class="sku-th-index" style="width:80px;font-size:14px;word-break:break-all">库存</th>
									<th class="sku-th-index" style="width:80px;font-size:14px;word-break:break-all">价格</th>
									<th class="sku-th-index" style="width:80px;font-size:14px;word-break:break-all">是否上架</th>
									<th class="sku-th-index" style="width:80px;font-size:14px;word-break:break-all">操作</th>
								</tr>
						   </thead>
						   <tbody>
						   	    <tr>
						   	    	<td><input type="text" name="store"><label style="display:none" for="" class="text-danger error">库存必须是数字</label></td>
						   	    	<td><input type="text" name="price"><label style="display:none" for="" class="text-danger error">价格必须是数字</label></td>
						   	    	<td><input type="checkbox" checked="checked" name="status" value="1"></td>
						   	    	<td><span class="btn btn-xs btn-danger cancelBtn">取消</span></td>
						   	    </tr>
						   </tbody>
	</table>
</div>
			
<!--隐藏的元素用于-->


<!--用于显示图片的摸态框-->

<!--用于显示图片的摸态框-->

</block>



<block name="end">
<script>
    function ajaxGetPropery(cid){
    	$.ajax({
    		url:'<{:U("Goods/getidProperty")}>',
				type:'post',
				data:{cid:cid},
				beforeSend:function(){
					$('#loading').show();
				},
				success:function(data){
					$('#loading').hide();
					$('#propertyChBox').html(data);
				},
			async:true,
    	})
    }
  

     function checkStore(target){
    	var pattern = /^[1-9]\d*$|0/ig;
    	if(pattern.test(target.val())){
    		target.next().hide();
    		return true;
    	}else{
    		target.next().show();
    		return false;
    	}
    }
    function checkPrice(target){
    	var pattern = /^[1-9]\d*\.?\d{2}$|^[1-9]\d*$/ig;
  
    	if(pattern.test(target.val())){
    		target.next().hide();
    		return true;
    	}else{
    		target.next().show();
    		return false;
    	}
    }
    ajaxGetPropery("<{$product['cid']}>");
	$('.catSelect').find('option:disabled').css({
		color:'#5286F0'
	})

	$('.catSelect').find('option:not(:disabled)').css({
		color:'blue'
	}).end().change(function(){
		var cid = $(this).find(':selected').val();
		if(confirm('在更换分类之后，你之前的操作将会重置,确认要切换分类吗?')){
			$('#skuTable').html('');
			$.ajax({
				url:'<{:U("Goods/getidProperty")}>',
				type:'post',
				data:{cid:cid},
				beforeSend:function(){
					$('#loading').show();
				},
				success:function(data){
					$('#loading').hide();
					$('#propertyChBox').html(data);
				},
				async:true,
			})
		}
	})

	/**
	 * 上传图片之后实时显示上传的图片
	 */
	$('#info_photo').change(function(){
		var reader = new FileReader(),
		file = $(this).get(0).files[0];

		//检测是不是图片类型
		if(!/^image\/.*/ig.test(file.type)){
			$(this).parent().next().show();
		}else{
			$(this).parent().next().hide();
			reader.readAsDataURL(file);
		}

		reader.onload = function(){
			$('#goods_image_tag').attr('src',reader.result);
			
		}
	
	})

	//表单失去焦点的时候验证信息
	$('form').focusout(function(event){
		var ev = window.event || event,
		  target = ev.srcElement || ev.target;

		//如果是商品名称，则弹出相应的提示信息
		if($(target).attr('id')=='goodsname'){
			if(!checkGoodsName()){
				$(target).next().show();
			}else{
				$(target).next().hide();
			}
		}

		//如果是库存，则弹出相应的提示信息
		if($(target).attr('name')=='store'){

			if(!checkStore($(target))){
				$(target).next().show();
			}else{
				$(target).next().hide();
			}
		}

		//如果是价格，则弹出相应的提示信息
		if($(target).attr('name')=='price'){
			if(!checkPrice($(target))){
				$(target).next().show();
			}else{
				$(target).next().hide();
			}
		}

	}).change(function(){
		$('form').triggerHandler('focusout');
	}).click(function(event){
		var ev = window.event || event,
		  target = ev.srcElement || ev.target;
		if($(target).hasClass('cancelBtn')){
			$(target).closest('table').remove();
		}
	}).submit(function(){
		if($('#skuTable').find('.sku_table').length==0){
	    	alert('请填写完整商品信息!');
	    	return false;
	    }
		var a,b,c;
		console.log($('form input[name="store"]'));

		b=checkStore($('form input[name="store"]'));
		c=checkPrice($('form input[name="price"]'));
		return b&&c;

	})
	// $('.upload-thumb').click(function(event){
	// 	// event.preventDefault();
	// 	$('#myModal').modal('show').find('img').attr('src',$('#goods_image_tag').attr('src'));
	// })
	// 
	
	//鼠标移上上传按钮之后显示相信的提示信息
	$('.btn-file').popover({
		content:'上传的必须是图片类型,最佳分辨率是800*800',
		title:'提示',
		trigger:'hover'
	});

	//点击生成商品，添加sku
	$('.addSku').click(function(event){
		var th = '',
			val,
			td='',
			index,
			cloneSku,
			proid,
			proid,
			prokey;
		event.preventDefault();

		//先在后面插入table
	    if($('#skuTable').find('.sku_table').length>=1){
	    	alert('一次只能插入一条产品信息!你可以点击取消来重新选择');
	    	return;
	    }
		cloneSku = $('.cloned #sku_table').clone();
		$('#skuTable').append(cloneSku);

		//取得要插入的skutable的位置
		index = $('#skuTable').find('.sku_table').length - 1;
	
		$.each($('.propertyLabel'),function(i){
			th += '<th class="sku-th-index" style="width:80px;font-size:14px;word-break:break-all">'+$(this).html()+'</th>';
		})
		console.log($('#skuTable .sku_table').eq(index).find('thead tr'));
		$(th).prependTo($('#skuTable .sku_table').eq(index).find('thead tr'));

		$.each($('.valDiv'),function(i){
			if($(this).find(':checked').length>0){
				val = $(this).find(':checked').next().html();
				valkey = $(this).find(':checked').attr('_name')+'[]';
				valid = $(this).find(':checked').attr('_value');
				prokey =  $(this).find(':checked').prev().attr('_name')+'[]';
				proid = $(this).find(':checked').prev().attr('_value');
				input = '<input type="hidden" name='+valkey+' value='+valid+'>';
				input += '<input type="hidden" name='+prokey+' value='+proid+'>';
			}else{
				val = '没有选择';
				input = '';
			}
			td += '<td>'+val+input+'</td>';
		})
		console.log(td);
		$(td).prependTo($('#skuTable .sku_table').eq(index).find('tbody tr'));
		$('#skuTable .sku_table').show();
	})

</script>	
</block>
